import type { context, FileHandlerPlugin } from "@file-viewer/sdk";
import Prism from "prismjs";
import "prismjs/themes/prism.css";
import { useEffect, useState } from "react";

// let _React: typeof import("react");
// export function init({ React }: { React: typeof import("react") }) {
//   _React = React;
// }

const plugin: FileHandlerPlugin = {
  name: "text",
  tag: ["text"],
  pluginType: "FileHandler",
  fileTypes: ["text", "go", "md"],
  preview: (ctx: context) => {
    return <TextPreview {...ctx} />;
  },
  openFile: (context) => {
    return <div>text </div>;
  },
}

function TextPreview(ctx: context) {
  const [content, setContent] = useState<string>("")


  useEffect(() => {
    ctx.client.post("/api/text-preview/ReadTextFile", { fileName: ctx.filePath }).then(res => {
      setContent(res.data.content)
      Prism.highlightAll()
    }).catch(err => {
      console.error(err)
    })

  }, [])

  return <div className="select-text h-full overflow-auto">
    <pre className="">
      <code className="language-go">{content}</code>
    </pre>
  </div>
}


export default plugin;

